<template>
  <div>
  <v-card style="width:100%;">
      <v-card-title>
        <h3>{{name}}--</h3><h4>(项目名：<span style="color:#00c853;">{{$route.params.prjName}}</span>)</h4>
      </v-card-title>
    </v-card>
    <p></p>
    <v-card>
      <v-card-title>
        <v-flex xs12 sm12 md5 class="pr-3">
          <v-btn color="error" dark @click.native="newPublish($route.params.projectId)" small><h4>新建发布</h4></v-btn>
          <v-btn color="secondary" dark @click.native="openRestartService($route.params.projectId)" small><h4>服务启停</h4></v-btn>
          <v-btn v-if="fileButton" color="secondary" @click.native="openFileReplace($route.params.projectId)" dark  small><h4>文件替换</h4></v-btn>
          <v-btn color="primary" dark @click.native="closePublishList()" small><h4>返回</h4></v-btn>
        </v-flex>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="px-0 py-0">
        <v-data-table
          :headers="headers"
          :items="items"
          :pagination.sync="pagination"
          :total-items="totalItems"
          :loading="loading"
          :rows-per-page-items="rowsPerPageItems"
          :no-data-text="etext"
          class="elevation-1">
          <template slot="items" slot-scope="props">
            <td class="datastyle" v-for="(value) in tempHeader" :key="value.id" @click="showHosts(props.item.hosts)">{{props.item[value.value]}}</td>
            <td class="justify-center layout px-0">
              <v-btn small dark color="primary" v-if="props.item.status_code === 0" @click="openPublish(props.item.id)">
                <h4>执行</h4>
              </v-btn>
              <v-btn small dark color="secondary" v-if="props.item.status_code === 1 || props.item.status_code === 6 || props.item.status_code === 7
              || props.item.status_code === 4" @click="openPubInfo(props.item.id)">
                <h4>执行情况</h4>
              </v-btn>
              <v-btn small dark color="warning" v-if="props.item.status_code !== 3"  @click="deletePublish(props.item.id)">
                <h4>失效</h4>
              </v-btn>
            </td>
          </template>
          <template slot="no-data">
            <v-alert :value="true" color="error" icon="warning">
              {{etext}}
            </v-alert>
          </template>
        </v-data-table>
        <v-snackbar :timeout="timeout" :color="color" :multi-line="true" :vertical="mode === 'vertical'"
        v-model="snackbar" top>
        {{ text }}
        <v-btn dark flat @click.native="snackbar = false">Close</v-btn>
      </v-snackbar>
      </v-card-text>
    </v-card>
    <newPublish :newDialog = "newDialog" :pid = "pid"></newPublish>
    <verify :vcodeDialog = "vcodeDialog" @upVerify="verifyResult"
            :verifyTitle="verifyTitle" @clsVerify="closeVerifyDialog"></verify>
    <publishinfo :pubInfoDialog = "pubInfoDialog" :infoId="infoId" :status="status"></publishinfo>
    <restartService :restartServiceDialog="restartServiceDialog" :pid = "pid" @clsRestartDialog="clsRestartDialog"></restartService>
    <file-replace :fileReplaceDialog="fileReplaceDialog" :pid = "pid" @clsFileDialog="clsFileDialog"></file-replace>
    <load-layer :loadDialog = "submitLoad" loadText="redmine正在处理中..."></load-layer>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('listPublish')

export default {
  name: 'listPublish',
  data: function () {
    return this.$store.state.listPublish
  },
  methods: {
    ...mapActions({
      closePublishList: 'closePublishList',
      handlerPublishList: 'handlerPublishList',
      loadPublishHeaders: 'loadPublishHeaders',
      newPublish: 'newPublish',
      doPublish: 'doPublish',
      openPublish: 'openPublish',
      openPubInfo: 'openPubInfo',
      deletePublish: 'deletePublish',
      showHosts: 'showHosts',
      openRestartService: 'openRestartService',
      openFileReplace: 'openFileReplace'
    }),
    verifyResult () {
      this.doPublish(this.pubid)
    },
    closeVerifyDialog () {
      this.vcodeDialog = false
    },
    clsRestartDialog () {
      this.restartServiceDialog = false
    },
    clsFileDialog () {
      this.fileReplaceDialog = false
    }
  },
  props: {
    publishDialog: {
      type: Boolean,
      default: null
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    pagination () {
      this.handlerPublishList(this.$route.params.projectId)
    },
    search () {
      this.handlerPublishList(this.$route.params.projectId)
    },
    publishDialog () {
      this.handlerPublishList(this.$route.params.projectId)
    },
    newDialog () {
      if (!this.newDialog) {
        this.handlerPublishList(this.$route.params.projectId)
      }
    },
    vcodeDialog () {
      if (!this.vcodeDialog) {
        this.handlerPublishList(this.$route.params.projectId)
      }
    },
    refreshId () {
      this.handlerPublishList(this.$route.params.projectId)
    }
  },
  mounted () {
    this.loadPublishHeaders()
  },
  beforeDestroy () {
    this.$route.params.fileReplace = ''
  },
  components: {
    newPublish: () => import('../publish/newPublish'),
    publishinfo: () => import('../publish/publishinfo'),
    restartService: () => import('../publish/restartService'),
    verify: () => import('../../components/verify/verify'),
    'load-layer': () => import('../../components/loading/loadLayer'),
    'file-replace': () => import('../publish/fileReplace')
  }
}
</script>
